<template>
  <view>
    <view
      class="content-box"
      v-for="(item, index) in listData"
      :key="index"
    >
      <!-- <image class="head-img" :src="item.img" />
        <view class="serve-box">
          <view class="serve-left">
            <view class="title">{{ item.title }}</view>
            <view class="time">有效期:{{ item.time }}个月</view>
          </view>
          <view class="serve-right">￥{{ item.money }}</view>
        </view> -->
      <!-- 上面盒子 -->
      <view class="content-top">
        <view class="top-left">
          <image class="head-img" :src="item.img || baseImgUrl + '/userImg/img_service_small_bg.png'" />
        </view>
        <view class="top-right">
          <view class="right-top">
            {{ item.cardName }}
          </view>
          <view class="right-center">
            有效期:{{ item.validMonths }}个月
          </view>
          <view class="right-down">
            ￥{{ item.cardPrice }}
          </view>
        </view>
      </view>
      <!-- 下面盒子 -->
      <view class="content-down">
        <view class="down-left">
          <text class="label" :style="{ color: statusConfig[item.serviceState].color }">
            {{ statusConfig[item.serviceState].text }}
          </text>
        </view>
        <view class="down-right">
          <view class="basic-btn"  @click="clickBasic(item)" v-if="item.serviceState === 1">请完善基本资料</view>
          <view class="detail-btn" @click="clickDetail(item)" v-else>查看资料</view>
          <!-- <view class="detail-btn"  @click="clickDetail(item)">查看详情</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { baseImgUrl } from '@/config'
  export default {
    name: "CustomServeList",
    data() {
      return {
        baseImgUrl,
        listData: [],
        statusConfig:{
          1: { text: '待提交病例', color: '#999' },
          2: { text: '待分配医师', color: '#999' },
          3: { text: '服务中', color: '#999' },
          4: { text: '服务结束(到期)', color: '#999' },
        }
      }
    },
    props: {
      customServeList: {
        type: Array,
        default: []
      }
    },
    watch: {
      customServeList: {
        handler(newVal, oldVal) {
          this.listData = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.listData = uni.$u.deepClone(this.customServeList)
    },
    methods: {
      clickDetail(item) {
        uni.navigateTo({
          url: `/subPages/userIndex/memberCenter/basicInfo?hasInfo=1&cardId=${item.id}`,
        })
      },
      clickBasic(item) {
        uni.navigateTo({
          url: `/subPages/userIndex/memberCenter/basicInfo?cardId=${item.id}`,
        })
      }
    }
  }
</script>
<style lang="scss">
  .content-box {
    width: 690rpx;
    margin: 0 auto;
    margin-top: 15rpx;
    border-radius: 16rpx;
    background: #fff;
    padding: 30rpx;
    .content-top{
      display: flex;
      .head-img{
        width: 240rpx;
        height: 140rpx;
        border-radius: 8rpx;
      }
      .top-right{
        margin-left: 20rpx;
        .right-top{
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }
        .right-center{
          font-size: 24rpx;
          color: #999;
          margin-top: 20rpx;
        }
        .right-down{
          font-size: 28rpx;
          color:#FF513A;
          margin-top: 20rpx;
        }
      }
    }
    .content-down{
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      .down-right{
        display: flex;
        .basic-btn{
          display: block;
          height: 60rpx;
          border:2rpx solid #eee;
          border-radius: 30rpx;
          background: #fff;
          color: #2A82E4;
          font-size: 28rpx;
          padding: 10rpx 20rpx 0px 20rpx;
        }
        .detail-btn{
          height: 60rpx;
          border:2rpx solid #eee;
          border-radius: 30rpx;
          background: #fff;
          color: #333;
          font-size: 28rpx;
          padding: 10rpx 20rpx 0px 20rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
</style>
